<template>
  <div class="ivz-edit-modal" ref="ivzEditModal" @click.stop="activeHandle">
    <a-modal :visible="visible" @ok="handleOk"
      :centered="model.centered" :width="model.width" :getContainer="getEditModalContainer"
      :closable="model.closable" :maskClosable="model.maskClosable" :mask="model.mask"
      :bodyStyle="{height: model.height}" class="ivz-dialog-class" @cancel="closeHandle">
      <template #title>
        <div class="ivz-do-item">
          <ul style="list-style: none; margin: 0px; padding: 0px;">
            <li style="float: left; width: 128px;">{{model.title}}</li>
            <li style="float: right; font-size: 14px; color: #cccccc; margin-right: 20px">注：输入的值将作为默认值</li>
            <li style="clear: both;"></li>
          </ul>
        </div>
      </template>
      <a-form style="width: 100%; height: 100%" :labelAlign="model.align" :layout="model.layout"
        :labelCol="model.labelCol" :wrapperCol="model.wrapperCol" ref="viewModelRef">
        <div class="ivz-area-desc" v-if="metas.length == 0">
          <span><DragOutlined />可拖入表单组件</span>
        </div>
        <draggable :list="metas" group="edit" :animation='200' :gutter="3" component="a-row"
                   class="ivz-vd-body ivz-od-body ivz-area-draggable" style="width: 100%; height: 100%; overflow-y: auto;">
          <template v-for="meta in metas" :key="meta.id">
            <ivz-form-item :meta="meta" :data-id="meta.id" @delMetaItem="delMetaItem" />
          </template>
        </draggable>
      </a-form>
      <template #footer>
        <a-row type="flex" justify="end" class="ivz-ieo-footer ivz-area-draggable">
          <AButton type="default" class="ivz-edit-func">取消</AButton>
          <AButton type="primary" class="ivz-edit-func">提交</AButton>
          <AButton type="default" class="ivz-edit-func">重置</AButton>
        </a-row>
      </template>
    </a-modal>
  </div>
</template>

<script>
import {MixinEditConfig} from "@/components/MixinEditConfig";
import IvzFormItem from "@/components/item/IvzFormItem.vue";
import IvzGroupItem from "@/components/item/IvzGroupItem.vue";
import {mapMutations} from "vuex";
import {ModalEditTabMetas} from "@/metas/FormTabMetas";
import {ComponentType, PathSort} from "@/store/consts";
import {EventBus, MetaEventType} from "@/event";
import IvzBtnItem from "@/components/item/IvzBtnItem.vue";
import {DragOutlined} from "@ant-design/icons-vue";
import Utils from "@/utils/basic.utils";

export default {
  name: "IvzEditModal",
  mixins: [MixinEditConfig],
  components: {
    IvzBtnItem, IvzFormItem, IvzGroupItem, DragOutlined
  },
  created() {
    if(Utils.isBlank(this.meta['tabMetas'])) {
      this.meta.type = 'modal';
      this.meta['tabMetas'] = ModalEditTabMetas;
      this.initEditMeta(this.meta);
      this.switchEditVisible(true);
      this.switchActiveMetaTo(this.meta);
    } else {
      this.meta['tabMetas'] = ModalEditTabMetas;
      if(this.meta.type != 'modal') {
        this.meta.type = 'modal';
        this.meta['tabModel'] = {};
        this.initEditMeta(this.meta);
        this.switchEditVisible(true);
        this.switchActiveMetaTo(this.meta);
      } else {
        this.switchEditVisible(false);
      }
    }

    // 监听面包屑路径切换事件
    let _this = this;
    EventBus.listener(MetaEventType.path, path => {
      if(path.type != ComponentType.Edit) {
        _this.visible = false;
      } else {
        _this.visible = true
        _this.switchActiveMetaTo(_this.meta)
      }
    });

  },
  methods: {
    ...mapMutations(['initEditMeta', 'switchPathTo', 'removeEditFunMeta']),
    getEditModalContainer() {
      return this.$refs['ivzEditModal'];
    },
    closeHandle(e) {
      this.switchEditVisible(false);
    },
    handleOk() {

    }
  }
}
</script>

<style>
.ivz-edit-modal .ant-modal-mask,.ant-modal-wrap {
  position: absolute;
}
.ivz-ieo-footer {
  height: 32px;
}
.ivz-edit-modal .ivz-dialog-class {

}
</style>
